import { Canvas, Story, Meta } from "@storybook/blocks";
import { Select, Stack } from "metabase/ui";
import * as SelectStories from "./Select.stories";

<Meta of={SelectStories} />

# Select

Our themed wrapper around [Mantine Select](https://v6.mantine.dev/core/select/).

## Docs

- [Figma File](https://www.figma.com/file/21uCY0czmCfb6QBjRce0I8/Input-%2F-Select?type=design&node-id=1-96&mode=design&t=Mk8RP6HsneuWzHtr-0)
- [Mantine Select Docs](https://v6.mantine.dev/core/select/)

## Examples

<Canvas>
  <Story of={SelectStories.Default} />
</Canvas>

### Size - md

<Canvas>
  <Story of={SelectStories.EmptyMd} />
</Canvas>

#### Asterisk

<Canvas>
  <Story of={SelectStories.AsteriskMd} />
</Canvas>

#### Clearable

<Canvas>
  <Story of={SelectStories.ClearableMd} />
</Canvas>

#### Description

<Canvas>
  <Story of={SelectStories.DescriptionMd} />
</Canvas>

#### Disabled

<Canvas>
  <Story of={SelectStories.DisabledMd} />
</Canvas>

#### Error

<Canvas>
  <Story of={SelectStories.ErrorMd} />
</Canvas>

#### Read only

<Canvas>
  <Story of={SelectStories.ReadOnlyMd} />
</Canvas>

#### Icons

<Canvas>
  <Story of={SelectStories.IconsMd} />
</Canvas>

#### Groups

<Canvas>
  <Story of={SelectStories.GroupsMd} />
</Canvas>

#### Large sets

<Canvas>
  <Story of={SelectStories.LargeSetsMd} />
</Canvas>

#### Searchable

<Canvas>
  <Story of={SelectStories.SearchableMd} />
</Canvas>

### Size - xs

<Canvas>
  <Story of={SelectStories.EmptyXs} />
</Canvas>

#### Asterisk

<Canvas>
  <Story of={SelectStories.AsteriskXs} />
</Canvas>

#### Clearable

<Canvas>
  <Story of={SelectStories.ClearableXs} />
</Canvas>

#### Description

<Canvas>
  <Story of={SelectStories.DescriptionXs} />
</Canvas>

#### Disabled

<Canvas>
  <Story of={SelectStories.DisabledXs} />
</Canvas>

#### Error

<Canvas>
  <Story of={SelectStories.ErrorXs} />
</Canvas>

#### Read only

<Canvas>
  <Story of={SelectStories.ReadOnlyXs} />
</Canvas>

#### Icons

<Canvas>
  <Story of={SelectStories.IconsXs} />
</Canvas>

#### Groups

<Canvas>
  <Story of={SelectStories.GroupsXs} />
</Canvas>

#### Large sets

<Canvas>
  <Story of={SelectStories.LargeSetsXs} />
</Canvas>

#### Searchable

<Canvas>
  <Story of={SelectStories.SearchableXs} />
</Canvas>
